<template>
	<view>
		<form @submit="formSubmit">
			<view class="list">
				<view class="acea-row row-middle row-between item border-b">
					<view class="label">付款方式</view>
					<view class="acea-row row-middle row-right item-r pay-type">
						<view class="">付</view>
						<input class="pay-month" type="number" v-model="month" name="month">
						<view class="">月</view>
						<view class="margin-l">押金</view>
						<input class="pay-money" type="number" v-model="payMoney" name="payMoney">
						<view class="">元</view>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b">
					<view class="label">租金模式</view>
					<view class="acea-row row-middle row-right item-r sanjiao-right">
						<!-- <view class="no-data-r">请选择租金模式</view> -->
						<picker @change="bindPickerChange" :value="index" name='payMenth' :range="payMenthData"
							range-key='name'>
							<view class="uni-input">{{ payMenthData[index] ? payMenthData[index].name : ''}}</view>
						</picker>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b">
					<view class="label">楼盘名称</view>
					<!-- 					<view class="acea-row row-middle row-right item-r">
						<input class="input-r" type="text" name="estateName" v-model="estateName" placeholder="请选择楼盘名称"
							placeholder-class="placeholder-class">
					</view> -->
					<view class="acea-row row-middle row-right item-r sanjiao-right" @click="projectClick">
						<!-- <Uselect class="input-r" v-model="projectId" :list="projectList" keyName="name"
								keyId="id" @inChange="getProjectList" placeholder="请选择项目" /> -->
						<input class="input-r" type="text" v-model="estateName" name='estateName' placeholder="请选择楼盘"
							placeholder-class="placeholder-class" disabled>
					</view>
				</view>

				<view class="acea-row row-middle row-between item border-b">
					<view class="acea-row row-middle row-right online">
						<view class="">层高</view>
						<input class="input-r" type="text" v-model="cenggao" name='cenggao'>
						<view class="">m </view>
						<view>进深</view>
						<input class="input-r" type="text" v-model="jianshen" name='jianshen'>
						<view class="">m</view>
						<view>开间</view>
						<input class="input-r" type="text" v-model="kaijian" name='kaijian'>
						<view class="">m </view>
					</view>
				</view>

				<!-- <view class="acea-row row-middle row-between item border-b">
					<view class="label">层高</view>
					<view class="acea-row row-middle row-right item-r">
						<input class="input-r" type="text" v-model="cenggao" name='cenggao' placeholder="请输入层高"
							placeholder-class="placeholder-class">m
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b">
					<view class="label">进深</view>
					<view class="acea-row row-middle row-right item-r">
						<input class="input-r" type="text" v-model="jianshen" name='jianshen' placeholder="请输入进深"
							placeholder-class="placeholder-class">m
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b">
					<view class="label">开间</view>
					<view class="acea-row row-middle row-right item-r">
						<input class="input-r" type="text" v-model="kaijian" name='kaijian' placeholder="请输入开间"
							placeholder-class="placeholder-class">m
					</view>
				</view> -->
				<view class="acea-row row-middle row-between item border-b">
					<view class="label">铺面类型</view>

					<view class="acea-row row-middle row-right item-r sanjiao-right" @click="opendiction(17)">
						<input class="input-r" type="text" placeholder="请选择铺面类型" placeholder-class="placeholder-class"
							v-model="storefrontTypeName" disabled />
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b">
					<view class="label">临路类型</view>
					<view class="acea-row row-middle row-right item-r sanjiao-right" @click="opendiction(16)">
						<input class="input-r" type="text" placeholder="请选择临路类型" placeholder-class="placeholder-class"
							v-model="linLuTypeName" disabled />
					</view>
				</view>
				<dictionaryType ref="dictionaryType" :gids='gids' @clickOk='clickOk' :key="gids"
					:popupShow='openPopupShow' @popupClose="openPopupShow = false" />
				<view class="acea-row row-middle row-between item border-b">
					<view class="label">最长租期</view>
					<view class="acea-row row-middle row-right item-r">
						<view class="text-r" style="display: flex;">
							<input class="input-r" type="text" v-model="reutLongdate" name='reutLongdate'
								placeholder="请输入最长租期" placeholder-class="placeholder-class">
							个月
						</view>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b">
					<view class="label">开店时间</view>
					<view class="acea-row row-middle row-right item-r sanjiao-right">
						<!-- <view class="no-data-r">请选择开店时间</view> -->
						<picker mode="date" :value="openAShop" name='openAShop' :start="startDate" :end="endDate"
							@change="openAShopChange">
							<view class="uni-input" :class="openAShop ? '' : 'no-data-r'">
								{{openAShop ? openAShop : '请选择开店时间'}}
							</view>
						</picker>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b">
					<view class="label">已有证件</view>
					<view class="acea-row row-middle row-right item-r sanjiao-right" @click="opendiction(20)">
						<input class="input-r" type="text" placeholder="请选择证件" placeholder-class="placeholder-class"
							v-model="credentialsName" disabled />
						<!-- <view class="no-data-r">请选择证件</view> -->
						<!-- 	<picker @change="credentialsChange" :value="credentialsIndex" name='credentials'
							:range="credentialsList" range-key='name'>
							<view class="uni-input">
								{{credentialsList[credentialsIndex] ? credentialsList[credentialsIndex].name : ''}}
							</view>
						</picker> -->
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b">
					<view class="label">店面类型</view>
					<view class="acea-row row-middle row-right item-r sanjiao-right">
						<!-- <view class="no-data-r">请选择店面类型</view> -->
						<!-- shopFrontType -->
						<picker @change="shopFrontTypeChange" :value="shopFrontTypeIndex" name='shopFrontType'
							:range="shopFrontTypeList" range-key='name'>
							<view class="uni-input">
								{{ shopFrontTypeList[shopFrontTypeIndex] ? shopFrontTypeList[shopFrontTypeIndex].name : ''}}
							</view>
						</picker>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b">
					<view class="label">经营方式</view>
					<view class="acea-row row-middle row-right item-r sanjiao-right">
						<!-- <view class="no-data-r">请选择经营方式</view> -->
						<!-- managementModel -->
						<picker @change="managementModelChange" :value="managementModelIndex" name='managementModel'
							:range="managementModelList" range-key='name'>
							<view class="uni-input">{{managementModelList[managementModelIndex].name}}</view>
						</picker>
					</view>
				</view>
				<view class="module">
					<view class="acea-row row-middle row-between">
						<view class="module-title">
							租赁合同
						</view>
						<view class="example-text">
							图片示例
						</view>
					</view>
					<view class="example-text-l">
						请至少添加一张照片，图片越多审核越快
					</view>
					<view class="acea-row pictrue-list">
						<view class="acea-row row-column row-center-wrapper pictrue"
							v-for="(item,index) in contractImageList" :key="index" @click="deleteImage(index)">
							<image style="width: 218rpx;height: 172rpx;" :src=item mode=""></image>
						</view>
						<view class="acea-row row-column row-center-wrapper pictrue" @click="selectPicture"
							v-if="!contractImageList.length<10">
							<view class="upload-icon">
								<image src="../static/images/upload_icon.png" mode=""></image>
							</view>
							<view>合同上传</view>
						</view>
					</view>
				</view>
				<view class="acea-row row-middle row-between item border-b">
					<view class="label">合同日期</view>
					<view class="acea-row row-middle row-right item-r sanjiao-right">
						<!-- <view class="no-data-r">请选择合同日期</view> -->
						<picker mode="date" :value="contractTime" name='contractTime' :start="startDate" :end="endDate"
							@change="contractTimeChange">
							<view class="uni-input" :class="contractTime ? '' :'no-data-r'">
								{{contractTime ?contractTime : '请选择合同日期'}}
							</view>
						</picker>
					</view>
				</view>
				<view class="uni-p-b-98"></view>
			</view>
			<button class="submit-btn" form-type="submit">完成</button>
			<view class="uni-p-b-98"></view>
		</form>
		<wordSearch ref="wordSearch" :list="projectList" keyName="name" keyId="id" v-model="estate"
			@inChange="getProjectList" @name="(name)=> estateName = name" />
	</view>
</template>

<script>
	import {
		dictionary
	} from "@/api/subletOfShop.js"
	import {
		ShopRentDetailApiNoDw,
		informationAdd,
		editInfo
	} from "@/api/subletOfShop.js"
	import {
		ProjectList
	} from '@/api/subletOfShop.js';
	import dictionaryType from '../components/dictionaryType.vue'
	import wordSearch from '../components/wordSearch/wordSearch.vue'
	export default {
		components: {
			dictionaryType,
			wordSearch
		},
		data() {
			const currentDate = this.getDate({
				format: true
			})
			return {
				contractTime: '', // 合同日期
				openAShop: '', // 开店时间
				reutLongdate: '', // 最长租期
				kaijian: '', // 开间
				jianshen: '', // 进深
				cenggao: '', //层高
				index: 0,
				payMenthData: [],
				payMenth: '', //租金模式
				month: 6, //付款方式月
				payMoney: 10000, //付款方式押金
				estate: '', //楼盘id
				estateName: '', //楼盘名称
				storefrontTypeList: [], // 店铺类型数据
				linLuType: '', //临路类型
				linLuTypeName: '', //临路类型名称
				credentials: '', // 已有证件
				credentialsName: '', //已有证件名称
				credentialsList: [], //  已有证件数据
				credentialsIndex: 0,
				shopFrontType: '', // 店面类型
				shopFrontTypeList: [], // 店面类型数据
				shopFrontTypeIndex: 0,
				managementModel: '',
				contractImageList: [],
				projectList: [],
				managementModelList: [{
					id: '0',
					name: '直营'
				}, {
					id: '1',
					name: '加盟'
				}, {
					id: '2',
					name: '联营'
				}],
				managementModelIndex: 0,
				openPopupShow: false,
				gids: 15,
				storefrontTypeName: '',
				infoId: ''
			};
		},
		onLoad(option) {
			const title = option.typeOn == '0' ? '出租' : '转租'
			uni.setNavigationBarTitle({
				title: title + '-资料完善'
			})
			this.getDictionary()
			this.getProjectList('');
			this.infoId = option.id ? option.id : ''
			if (this.infoId) {

				this.getDetail()


			}

		},
		computed: {
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			}
		},
		methods: {
			//打开复选框
			opendiction(val) {
				this.gids = val;
				this.openPopupShow = true
			},
			projectClick() {
				this.$refs.wordSearch.open = true
			},
			//获取项目列表
			async getProjectList(name) {
				try {
					const {
						data
					} = await ProjectList({
						name
					});
					this.projectList = data.list;
				} catch (e) {
					//TODO handle the exception
				}
			},
			//临路类型
			clickOk(val) {
				if (this.gids == 16) {
					this.linLuType = val.map(item => {
						return item.id
					}).join(',');
					this.linLuTypeName = val.map(item => {
						return item.describe
					}).join(',');
				} else if (this.gids == 17) {
					console.log(val)
					this.storefrontTypeList = val.map(item => {
						return item.id
					}).join(',');

					this.storefrontTypeName = val.map(item => {
						return item.describe
					}).join(',');
				} else if (this.gids == 20) {
					console.log(val)
					this.credentials = val.map(item => {
						return item.id
					}).join(',');

					this.credentialsName = val.map(item => {
						return item.describe
					}).join(',');
				}

				this.openPopupShow = false
			},
			formSubmit(e) {
				let that = this;
				e.detail.value.rcntPattern = this.payMenthData[this.index].id
				e.detail.value.storefrontType = this.storefrontTypeList.length ? this.storefrontTypeList : ''
				e.detail.value.linLuType = this.linLuType
				e.detail.value.credentials = this.credentialsList[this.credentialsIndex].id
				e.detail.value.estateName = this.estate
				e.detail.value.shopFrontType = this.shopFrontTypeList[this.shopFrontTypeIndex].id
				e.detail.value.managementModel = this.managementModelList[this.managementModelIndex].id
				e.detail.value.contractImage = this.contractImageList.join(',')
				e.detail.value.id = this.infoId ? this.infoId : ''

				// uni.$emit("means", e.detail.value);
				// uni.navigateBack()
				e.detail.value.contractTime = e.detail.value.contractTime ? e.detail.value.contractTime : ''

				if (!this.infoId) {
					return this.$util.Tip({
						title: '未获取到发布的信息'
					})
				}
				editInfo(e.detail.value).then(res => {
					if (res.code == 200) {
						that.$util.Tips({
							title: '完善成功'
						},{
							tab:2,
							url:"/pages/releases/rentalStores/rentalStores"
						})
						
					}
				})
			},
			deleteImage(index) {
				this.contractImageList.splice(index, 1)
			},
			selectPicture() {
				let that = this;
				that.$util.uploadImageOne({
					url: 'upload/image',
					name: 'multipart',
					count: 5,
					model: "user",
					pid: 0,
				}, function(res) {
					that.contractImageList.push(res.data.url)
				});
			},
			getDictionary() {
				let gids = '18,14,20,21'
				dictionary({
					gids: gids
				}).then(res => {
					this.payMenthData = res.data[18]
					this.credentialsList = res.data[20]
					this.shopFrontTypeList = res.data[21]
				})
			},
			bindPickerChange(e) {
				this.index = e.detail.value;
				// this.payMenth = this.payMenthData[this.index].id
			},
			storefrontTypeChange(e) {
				this.storefrontTypeIndex = e.detail.value;
			},
			openAShopChange(e) {
				this.openAShop = e.detail.value;
			},
			contractTimeChange(e) {
				this.contractTime = e.detail.value;
			},
			credentialsChange(e) {
				this.credentialsIndex = e.detail.value;
				// this.credentials = this.credentialsList[this.credentialsIndex].id
			},
			shopFrontTypeChange(e) {
				this.shopFrontTypeIndex = e.detail.value;
				// this.shopFrontType = this.shopFrontTypeList[this.shopFrontTypeIndex].id
			},
			managementModelChange(e) {
				this.managementModelIndex = e.detail.value;
				// this.managementModel = this.managementModelList[this.managementModelIndex].id
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();

				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},
			getDetail() {
				ShopRentDetailApiNoDw(this.infoId).then(res => {
					console.log('editShop1', res)
					if (res.code == 200) {
						this.dataform = res.data
						let d = res.data;
						getApp().globalData.fbDeal(d, this)
						this.linLuType = this.dataform.linLuType;
						console.log(this.storefrontTypeName)
						this.payMenthData.forEach((item, index) => {
							if (item.id == this.dataform.rcntPattern) {
								this.index = index;
							}
						})
						// console.log(this.groupCurrentName )
						// this.supportingFacility = this.dataform.supportingFacility
						// this.groupCurrentName = this.dataform.groupCurrent
						// this.workingGroupName = this.dataform.workingGroup
						// if (this.dataform.contacts && this.dataform.contacts.length > 0) {
						// 	this.contactList = this.dataform.contacts.map(item=>({
						// 		...item,
						// 		username: item.contactName,
						// 		phone: item.contactPhone,
						// 		id: item.contactId,
						// 		type: item.contactType}))
						// 		delete this.dataform.contacts
						// }
						// this.dataform.storeAdvantage && this.dataform.storeAdvantage.split('/').forEach((item,index) => {
						// 	let ind = this.advantages.indexOf(item);
						// 	if (ind == -1) {
						// 		this.advantages.push(item)
						// 		this.storeAdvantage.push(item)
						// 		this.advantageIds.push(this.advantages.length - 1)
						// 	} else {
						// 		this.advantageIds.push(ind)
						// 		this.storeAdvantage.push(this.advantages[ind])
						// 	}

						// })
						// this.dataform.shopfrontPhoto&&(this.shopfrontPhotoList = this.dataform.shopfrontPhoto.split(','))
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@import '/static/css/releaseForm.css';

	.list .item-r {
		width: calc(100% - 180rpx);
	}
</style>